<template>
	<view class="page-container">
		<up-navbar safeAreaInsetTop fixed :bgColor="navbarcfg.bgColor" @leftClick="pageBack">
			<template #center>
				<view class="navbar-avatar" :style="{ color: navbarcfg.color }">
					<image :src="detailInfo.author_avatar" class="user-avatar" />
					<text class="fs-28 font-bold ml-8">{{ detailInfo.author_name }}</text>
				</view>
			</template>
		</up-navbar>
		<zjy-banners :images="detailInfo.image_urls" :height="872" />
		<view class="content-wrap">
			<view class="locations">
				<view v-for="(item, index) in detailInfo.resorts" :key="index" class="location-item">
					<image :src="imgBaseUrl + 'note-loc.png'" class="icon-32" />
					<text class="ml-8 mr-2">{{ item.name }}</text>
					<image :src="imgBaseUrl + 'icon-right.png'" class="icon-16" />
				</view>
			</view>
			<view class="mt-32 mb-16 fs-40 font-bold">{{ detailInfo.title }}</view>
			<view class="fs-28 lh-44 c-grey-4e">
				{{ detailInfo.content }}
			</view>
			<view class="mt-24 c-grey-86">{{ getShortDate(detailInfo.create_time) }} 发布</view>
		</view>
		<bottom-menu :detail="detailInfo" />
	</view>
</template>
<script setup lang="ts">
import { $getArticleDetail } from "@/api/feed/note"
import immersiveNavbar from "@/mixins/immersive-navbar"
import { getShortDate } from "@/utils/tools"
import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
import bottomMenu from "./components/bottom-menu.vue"
import { pageBack } from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")
const detailInfo = ref<any>({})
const getDetail = (id: string) => {
	$getArticleDetail(id).then((res) => {
		detailInfo.value = res
	})
}
//#region 沉浸式导航栏
let { navbarcfg, titleColor, pageScroll } = immersiveNavbar()
titleColor.value = "#fff"
onPageScroll((e) => {
	let scrollTop = e.scrollTop
	pageScroll(scrollTop)
})
//#endregion
onShareAppMessage(() => {
	return {}
})
onShareTimeline(() => {
	return {}
})
onLoad((options) => {
	getDetail(options?.id)
})
</script>
<style lang="scss" scoped>
.navbar-avatar {
	position: absolute;
	left: calc(46px + 10rpx);
	display: flex;
	align-items: center;
}
.user-avatar {
	width: 68rpx;
	height: 68rpx;
}
.content-wrap {
	position: relative;
	margin-top: -32rpx;
	background: $c-white;
	border-radius: 32rpx 32rpx 0 0;
	padding: 32rpx 32rpx 176rpx;
	.locations {
		display: flex;
		flex-wrap: wrap;
		.location-item {
			height: 36rpx;
			background: $grey;
			border-radius: 64rpx;
			padding: 0 12rpx 0 2rpx;
			display: flex;
			align-items: center;
			& + .location-item {
				margin-left: 8rpx;
			}
		}
	}
}
.bottom-fixed-wrap {
	box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.1);
}
</style>
